<html>
  <head>
    <title><%= title %></title>
    <style type="text/css" media="screen">
      <%= read('stylesheets/slides.css') %>
    </style>
    <% stylesheets.each do |style| %>
      <link rel="stylesheet" href="<%= style %>" type="text/css" media="screen" charset="utf-8" />
    <% end %>
    <script type="text/javascript">
      <%= read('javascripts/jquery-1.3.2.js') %>
    </script>
    <script type="text/javascript" charset="utf-8">
      <%= read('javascripts/jquery.easing.js') %>
    </script>
    <script type="text/javascript" charset="utf-8">
      <%= read('javascripts/jquery.hash-changed.js') %>
    </script>
    <script type="text/javascript" charset="utf-8">
      <%= read('javascripts/slides.js') %>
    </script>
    <% javascripts.each do |javascript| %>
      <script type="text/javascript" charset="utf-8">
        <%= javascript %>
      </script>
    <% end %>
  </head>
  <body>
    <div id="instructions">
      Use the left/right arrow keys to navigate.
    </div>
    <div id="slides">
      <div id="track">
        <% slides.each_with_index do |slide, idx| %>
          <div class="<%= slide.classes.join(' ') %>">
            <div id="slide-<%= idx %>" class="content">
              <%= slide.html %>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </body>
</html>
